<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义右键菜单</title>
    <script src="../js/jquery-3.5.0.min.js"></script>
    <style>
        html{
            background-color: black;
        }
        #menu{
            /* list-style-type: none; */
            background-color: #fff;
            border-radius: 8px;
            width: 150px;
            color: #8a8a8a;
            display: none;
            position: absolute;
        }
        #menu>li{
            padding-left: 30px;
            width: 160px;
            height: 40px;
            display: block;
            line-height: 40px;
            margin-left: -40px;
            
        }
        #menu>li:first-child{
            list-style-image: url("./images/aim.png");
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        #menu>li:last-child{
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>播放/暂停</li>
        <li>查看信息/下载</li>
        <li>个性化设置</li>
        <li>刷新</li>
        <li>首页</li>
    </ul>
    <script>
        document.oncontextmenu = function(){
            x = event.clientX;
            y = event.clientY;
            $("#menu").css({"left":x+"px","top":y+"px","display":"block"});
            return false;
        }
        $("#menu").click(function(){
            $(this).css("display","none");
        })
        $("#menu>li").mouseenter(function(){
            $(this).css('background','red');
        })
        $("#menu>li").mouseout(function(){
            $(this).css('background','none');
        })
    </script>
</body>
</html>